import React from 'react';
import {SafeAreaView, StyleSheet, StatusBar, View,Text,Button} from 'react-native';
import SplashScreen from 'react-native-splash-screen'

import { createStackNavigator} from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
// import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
// import { createDrawerNavigator } from '@react-navigation/drawer';
// import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

import BottomNav from "./src/components/homes/BottomNav";
import PageScreen from "./src/components/pages/PageScreen";
import Login from "./src/components/pages/Login";

const Stack = createStackNavigator();
// const Tab = createBottomTabNavigator();
// const Tab = createMaterialTopTabNavigator();
// const Drawer = createDrawerNavigator();
// const Tab = createMaterialBottomTabNavigator();

class App extends React.Component {
  render() {
    return (
      <>
        <StatusBar
          translucent
          backgroundColor={'rgba(0,0,0,0)'}
        >
        </StatusBar>
        <SafeAreaView style={{flex:1}}>
          {/*顶部堆栈导航器*/}
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="homeTabNav" component={BottomNav} options={{headerShown:false}}/>
              <Stack.Screen name="login" component={Login} options={{
                title: '登录',
                headerStyle: { backgroundColor: '#1fc9ff' },
                headerTitleStyle: {color:'#fff'},
                headerTitleAlign:'center',
              }}/>
              <Stack.Screen name="page" component={PageScreen} options={{title: '详情'}}/>
            </Stack.Navigator>
          </NavigationContainer>

          {/* 底部导航栏*/}
          {/*<NavigationContainer>*/}
          {/*  <Tab.Navigator screenOptions={({ route }) => ({*/}
          {/*      tabBarIcon: ({ focused, color, size }) => {*/}
          {/*        let iconName;*/}
          {/*        if (route.name === 'Home') {*/}
          {/*          iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';*/}
          {/*        } else if (route.name === 'Settings') {*/}
          {/*          iconName = focused ? 'ios-list-box' : 'ios-list';*/}
          {/*        }*/}
          {/*        return <Ionicons name={iconName} size={size} color={color} />;*/}
          {/*      },*/}
          {/*    })}*/}
          {/*    tabBarOptions={{*/}
          {/*      activeTintColor: 'tomato',*/}
          {/*      inactiveTintColor: 'gray',*/}
          {/*    }}*/}
          {/*  >*/}
          {/*    <Tab.Screen name="Home" component={Home} options={{ tabBarBadge: 1 }}/>*/}
          {/*    <Tab.Screen name="Settings" component={Setting} />*/}
          {/*  </Tab.Navigator>*/}
          {/*</NavigationContainer>*/}

          {/* 顶部导航栏*/}
          {/*<NavigationContainer>*/}
          {/*  <Tab.Navigator>*/}
          {/*    <Tab.Screen name="home" component={Home} options={{title:'首页'}}/>*/}
          {/*    <Tab.Screen name="setting" component={Setting} options={{title:'设置'}}/>*/}
          {/*  </Tab.Navigator>*/}
          {/*</NavigationContainer>*/}

          {/* 抽屉效果导航栏*/}
          {/*<NavigationContainer>*/}
          {/*  <Drawer.Navigator>*/}
          {/*    <Drawer.Screen name="Set" component={Setting} />*/}
          {/*    <Drawer.Screen name="Home" component={Home} />*/}
          {/*  </Drawer.Navigator>*/}
          {/*</NavigationContainer>*/}

          {/* 底部动画效果导航栏*/}
          {/*<NavigationContainer>*/}
          {/*  <Tab.Navigator*/}
          {/*    activeColor="red"*/}
          {/*    inactiveColor="gray"*/}
          {/*    barStyle={{ backgroundColor: '#ddd' }}*/}
          {/*  >*/}
          {/*    <Tab.Screen name="Home" component={Home} />*/}
          {/*    <Tab.Screen name="Set" component={Setting} />*/}
          {/*  </Tab.Navigator>*/}
          {/*</NavigationContainer>*/}
        </SafeAreaView>
      </>
    );
  }

  componentDidMount() {
    // 渲染完毕，隐藏启动屏
    SplashScreen.hide();
  }
}

export default App;
